<template>
	<view>
		<view class="mt10 px16">
			<view class="br10 wd100 py10" style="background: #CBDAEB;">
				<view class="px10 mb10">
					<view class="fs20 c-000 fw600">我的名片</view>
				</view>
				<view class="dis-flex flex-align-center" v-if="!hasLogin">
					<view class="dis-flex flex-align-center flex-between wd100 px10">
						<view class="fs18 c-fff bg-common px16 py10 br10" @tap="$api.openWindow('/pages/login/login')">
							点击登录</view>
						<u-image src="/static/images/login-logo-new.png" width="155.5" height="147" />
					</view>
				</view>
				<view class="dis-flex flex-align-center" v-else>
					<view class="dis-flex flex-align-center flex-between wd100 px10">
						<view class="dis-flex-column flex">
							<view class="dis-flex flex-align-center">
								<view class="fs14 c-333">{{userInfo.realname?userInfo.realname:userInfo.username}}
								</view>
								<view class="fs14 c-333 ml10">{{getLevel()}}合伙人</view>
							</view>
							<view class="mt20 dis-flex flex-align-center flex-between">
								<view class="fs14 c-333">任职公司：</view>
							</view>
							<view v-for="(item, index) in companyList" :key="index" class="fs14 c-333 mt5">{{item}}
							</view>
						</view>
						<u-image v-if="userInfo.avatar" :src="$store.state.host + userInfo.avatar" width="160"
							height="160" />
					</view>
				</view>
			</view>
		</view>
		<view class="mt20 px16">
			<view class="dis-flex flex-align-center flex-between" @tap="jumpPage(1)">
				<view class="dis-flex flex-align-center">
					<u-image src="/static/images/center01.png" width="68.4" height="60" />
					<view class=" c-666 fs15">实名认证</view>
				</view>
				<u-icon name="arrow-right" color="#808080" size="28" label-size="28"></u-icon>
			</view>
			<view class="dis-flex flex-align-center flex-between mt15" @tap="jumpPage(2)">
				<view class="dis-flex flex-align-center">
					<u-image src="/static/images/center02.png" width="68.4" height="60" />
					<view class=" c-666 fs15">积分任务</view>
				</view>
				<u-icon name="arrow-right" color="#808080" size="28" label-size="28"></u-icon>
			</view>
			
			<view class="dis-flex flex-align-center flex-between mt15" @tap="jumpPage(12)">
				<view class="dis-flex flex-align-center">
					<u-image src="/static/images/center05.png" width="68.4" height="60" />
					<view class=" c-666 fs15">请款</view>
				</view>
				<u-icon name="arrow-right" color="#808080" size="28" label-size="28"></u-icon>
			</view>
			
			<view class="dis-flex flex-align-center flex-between mt15" @tap="jumpPage(3)">
				<view class="dis-flex flex-align-center">
					<u-image src="/static/images/center03.png" width="68.4" height="60" />
					<view class=" c-666 fs15">邀请有礼</view>
				</view>
				<u-icon name="arrow-right" color="#808080" size="28" label-size="28"></u-icon>
			</view>
			<!-- <view class="dis-flex flex-align-center flex-between mt15" @tap="jumpPage(4)">
				<view class="dis-flex flex-align-center">
					<u-image src="/static/images/center04.png" width="68.4" height="60"/>
					<view class=" c-666 fs15">我的活动</view>
				</view>
				<u-icon name="arrow-right" color="#808080" size="28" label-size="28"></u-icon>	
			</view> -->
			<view class="dis-flex flex-align-center flex-between mt15" @tap="jumpPage(10)">
				<view class="dis-flex flex-align-center">
					<u-image src="/static/images/center08.png" width="68.4" height="60" />
					<view class=" c-666 fs15">合同管理</view>
				</view>
				<u-icon name="arrow-right" color="#808080" size="28" label-size="28"></u-icon>
			</view>
			<!-- <view class="dis-flex flex-align-center flex-between mt15" @tap="jumpPage(11)">
				<view class="dis-flex flex-align-center">
					<u-image src="/static/images/center07.png" width="68.4" height="60" />
					<view class=" c-666 fs15">合同列表</view>
				</view>
				<u-icon name="arrow-right" color="#808080" size="28" label-size="28"></u-icon>
			</view> -->
			<view class="dis-flex flex-align-center flex-between mt15" @tap="jumpPage(5)">
				<view class="dis-flex flex-align-center">
					<u-image src="/static/images/center05.png" width="68.4" height="60" />
					<view class=" c-666 fs15">我的订单</view>
				</view>
				<u-icon name="arrow-right" color="#808080" size="28" label-size="28"></u-icon>
			</view>
			<!-- 	<view class="dis-flex flex-align-center flex-between mt15" @tap="jumpPage(6)">
				<view class="dis-flex flex-align-center">
					<u-image src="/static/images/center06.png" width="68.4" height="60"/>
					<view class=" c-666 fs15">购物车</view>
				</view>
				<u-icon name="arrow-right" color="#808080" size="28" label-size="28"></u-icon>	
			</view>
			<view class="dis-flex flex-align-center flex-between mt15" @tap="jumpPage(7)">
				<view class="dis-flex flex-align-center">
					<u-image src="/static/images/center07.png" width="68.4" height="60"/>
					<view class=" c-666 fs15">我的预约</view>
				</view>
				<u-icon name="arrow-right" color="#808080" size="28" label-size="28"></u-icon>	
			</view> -->
			<!-- <view class="dis-flex flex-align-center flex-between mt15" @tap="jumpPage(8)">
				<view class="dis-flex flex-align-center">
					<u-image src="/static/images/center08.png" width="68.4" height="60"/>
					<view class=" c-666 fs15">我的卡包</view>
				</view>
				<u-icon name="arrow-right" color="#808080" size="28" label-size="28"></u-icon>	
			</view> -->
			<view class="dis-flex flex-align-center flex-between mt15" @tap="jumpPage(9)">
				<view class="dis-flex flex-align-center">
					<u-image src="/static/images/center09.png" width="68.4" height="60" />
					<view class=" c-666 fs15">我的地址</view>
				</view>
				<u-icon name="arrow-right" color="#808080" size="28" label-size="28"></u-icon>
			</view>
			<!-- <view class="dis-flex flex-align-center flex-between mt15">
				<view class="dis-flex flex-align-center">
					<u-image src="/static/images/center10.png" width="68.4" height="60"/>
					<view class=" c-666 fs15">帮助中心</view>
				</view>
				<u-icon name="arrow-right" color="#808080" size="28" label-size="28"></u-icon>	
			</view> -->
			<!-- @tap="jumpPage(10)"  -->
			<view class="dis-flex flex-align-center flex-between mt15" @click="isshow=true">
				<view class="dis-flex flex-align-center">
					<u-image src="/static/images/center11.png" width="68.4" height="60" />
					<view class=" c-666 fs15">在线客服</view>
				</view>
				<u-icon name="arrow-right" color="#808080" size="28" label-size="28"></u-icon>
			</view>
			
			
			<view class="dis-flex flex-align-center flex-between mt15" @click="showAgreementHandle(1)">
				<view class="dis-flex flex-align-center">
					<u-image src="/static/images/center05.png" width="68.4" height="60" />
					<view class=" c-666 fs15">用户服务协议</view>
				</view>
				<u-icon name="arrow-right" color="#808080" size="28" label-size="28"></u-icon>
			</view>
			
			
			<view class="dis-flex flex-align-center flex-between mt15" @click="showAgreementHandle(2)">
				<view class="dis-flex flex-align-center">
					<u-image src="/static/images/center05.png" width="68.4" height="60" />
					<view class=" c-666 fs15">隐私协议</view>
				</view>
				<u-icon name="arrow-right" color="#808080" size="28" label-size="28"></u-icon>
			</view>
			
			
			<view class="dis-flex flex-align-center flex-between mt15" @click="logout()">
				<view class="dis-flex flex-align-center">
					<u-image src="/static/images/center10.png" width="68.4" height="60" />
					<view class=" c-666 fs15">注销账号</view>
				</view>
				<u-icon name="arrow-right" color="#808080" size="28" label-size="28"></u-icon>
			</view>
			
			
		</view>
		<view class="wd100 dis-flex flex-align-center mt20" v-if="hasLogin">
			<view class="dis-flex flex-align-center px16 wd100">
				<button class="btn-submit c-fff wd100" style="background: #4A94E6;" @tap="loginOut"
					:loading="loginLoading">退出登录</button>
			</view>
		</view>
		
		
		
		<!-- <view style="display: flex;align-items: center;margin-top: 110rpx;">
			<view class="inline-block ml-10" style="font-size: 25rpx;">
				<text @click="showAgreementHandle(1)" style="font-size: 25rpx;color:blueviolet;">《用户服务协议》、</text>
				<text @click="showAgreementHandle(2)" style="font-size: 25rpx;color:blueviolet;">《隐私协议》</text>
			</view>
		</view> -->
		
		
		
		
		<cc-popup :isShow='isshow' width="calc(100vw - 70px)"  radius="16rpx">
			<!-- 自定义展示内容 -->
			<view class="modelContent">

				<view class="titleV">

					客服二维码
				</view>
				<image class="imageV" mode="widthFix" :src="mySrc"></image>

				<button style="width: 80%; height: 48px; background-color: seagreen;color: white;"> 确定
				</button>

			</view>
			<!-- 自定义关闭按钮 -->
			<view class="close" @click="isshow=false">✕</view>
		</cc-popup>
		<view style="height: 30rpx;"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		data() {
			return {
				loginLoading: false,
				companyList: [],
				isshow:false,
				mySrc:'',
			};
		},

		watch: {
			userInfo: {
				handler(newVal, oldVal) {
					if (newVal.company) this.companyList = newVal.company.split('@#');
					else this.companyList = [];
				},
				deep: true
			}
		},

		onLoad(option) {
			if (this.hasLogin) {
				if (this.userInfo.company) this.companyList = this.userInfo.company.split('@#');
				else this.companyList = [];
			}
			this.GetCode()
		},

		methods: {
			
			getLevel(){
				if(!this.hasLogin) return '';
				if(this.userInfo.group_id == 1) return '初级';
				if(this.userInfo.group_id == 2) return '中级';
				if(this.userInfo.group_id == 3) return '高级';
				return '';
			},
			
			
			
			
			showAgreementHandle(num){
				if(num == 1){
					window.open('https://www.shdcjs.cn/info.html')
				}else{
					window.open('https://www.shdcjs.cn/yinsi.html')
				}
			},
			
			
			logout(){
				
				var that = this
				uni.showModal({
					    title: '提示：',
						content: '请确认是否要注销账号？',
						success: function(res) {
							if (res.confirm) {
								
							    that.$http.post(that.$config.UrlLogOut, {
							    }, {
							    	header: {
							    		'content-type': 'application/json'
							    	}
							    }).then((res) => {
							    	if(res.code == 1){
							    		that.$api.toast(res.msg)
							    		setTimeout(function(){
							    			that.$api.openWindow('/pages/login/login', 'reLaunch');
							    		},2000)
							    	}
							    })
								
							} else if (res.cancel) {
								return
							}
						}
					
				})
				
				
			},
			
			GetCode(){
				this.$http.post(this.$config.UrlLoad, {
				}, {
					header: {
						'content-type': 'application/json'
					}
				}).then((res) => {
					this.mySrc = this.$store.state.host + res.data
				})
			},
			updateCompay() {
				if (newVal.company) this.companyList = newVal.company.split('@#');
				else this.companyList = [];
			},

			jumpPage(index) {
				if (!this.hasLogin) {
					this.$api.openWindow('/pages/login/login');
				} else {
					switch (index) {
						case 1:
							this.$api.openWindow('/pages/center/userInfo');
							break;
						case 2:
							this.$api.openWindow('/pages/center/integral');
							break;
						case 3:
							this.$api.openWindow('/pages/center/myInvite');
							break;
						case 9:
							this.$api.openWindow('/pages/center/address');
							break;
						case 5:
							this.$api.openWindow('/pages/product/orderList');
							break;
						case 10:
							this.$api.openWindow('/pages/center/contractTemplete');
							break;
						case 11:
							this.$api.openWindow('/pages/center/contractAddList');
							break;
						case 12:
							this.$api.openWindow('/pages/center/yejishenbao');
							break;
						default:
							this.$api.toast('敬请期待~')
							break;
					}
				}
			},

			loginOut() {
				uni.removeStorageSync('login_atk');
				this.$store.commit('logout');
				this.$api.openWindow('/pages/login/login', 'reLaunch');
			},

		},
	}
</script>

<style>
	page {
		background: #fff !important;
	}
	.content {
	        display: flex;
	        flex-direction: column;
	
	    }
	
	    .popUpBtn {
	        height: 80rpx;
	        line-height: 80rpx;
	        width: 320rpx;
	        margin-top: 80rpx;
	        margin-left: auto;
	        margin-right: auto;
	        margin-bottom: 50rpx;
	        background-color: bisque;
	        text-align: center;
	    }
	
	    .modelContent {
	        width: 100%;
			background: #fff;
	        /* height: 100%; */
	        display: flex;
	        align-items: center;
	        flex-direction: column;
			border-radius: 16rpx;
						padding-bottom: 30rpx;
	    }
	
	    .titleV {
	
	        width: 100%;
	        height: 36px;
	        line-height: 30px;
	        font-weight: 550;
	        text-align: center;
	        margin-top: 8px;
	        font-size: 17px;
	        border-bottom: 1px solid #F1F1F1;
	    }
	
	    .imageV {
	
	        margin-top: 0px;
	        width: 80%;
	    }
	
	    .close {
	        width: 60rpx;
	        height: 60rpx;
	        color: #FFFFFF;
	        line-height: 60rpx;
	        text-align: center;
	        border-radius: 50%;
	        border: 1px solid #FFFFFF;
	        position: absolute;
	        bottom: -140rpx;
	        left: 50%;
	        transform: translate(-50%, -50%);
	    }
</style>